<template>
  <div>
    <a-card style="min-height: 70vh">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="name" label="任务名称">
          {{ form.name }}
        </a-form-model-item>
        <a-form-model-item ref="name" label="执行时间"> {{ form.startDate }}—{{ form.endDate }} </a-form-model-item>
        <a-form-model-item ref="name" label="投放时间">
          {{ form.publishDate }}
        </a-form-model-item>
        <a-form-model-item label="投放品牌">
          <a-tag color="#108ee9" v-for="item in form.brandIds" :key="item">
            {{ item }}
          </a-tag>
        </a-form-model-item>
        <a-form-model-item label="完成/投放人数"> {{ form.finishCount }} / {{ form.needFinishCount }}人 </a-form-model-item>
        <a-form-model-item label="推广说明">
          {{ form.description }}
        </a-form-model-item>
        <a-form-model-item label="任务素材">
          <div style="width: 130px">
            <img :src="themeInfo.backgroundImage" style="width: 100%; height: 160px" />
            <p style="line-height: 24px; margin-top: 12px">{{ themeInfo.name }}</p>
            <p>ID：{{ themeInfo.lookId }}</p>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>
<script>
import { taskInfo } from '@/api/pos/extension'
// import { themeList } from '@/api/pos/match'
import { guideDetail } from '@/api/pos/match'

export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 12 },
      form: {
        name: '',
        startDate: null,
        endDate: null,
        description: '',
        publishDate: '',
        areasId: [],
        brandIds: [],
        finishCount: '',
        needFinishCount: ''
      },
      id: this.$route.params.id,
      lookId: '',
      themeInfo: ''
    }
  },

  created() {
    if (this.id && this.id != 'add') {
      this.postDetail()
    }
  },
  methods: {
    // 回显
    postDetail() {
      let data = {
        taskId: this.id
      }
      taskInfo(data).then(res => {
        if (res.code == 200) {
          let info = JSON.parse(JSON.stringify(res.data))
          info.brandIds = info.brands ? info.brands.split(',') : []
          this.form = info
          this.lookId = info.lookId
          this.theme(info.themeId)
        }
      })
    },
    theme(themeId) {
      let data = {
        themeId: themeId
      }
      guideDetail(data).then(res => {
        if (res.code === 200) {
          this.themeInfo = res.data ? res.data : ''
          this.themeInfo.backgroundImage = res.data.backgroundImage ? res.data.backgroundImage.split(',')[0] : ''
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
p {
  margin-bottom: 0px !important;
}
.footer-box {
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: #fff;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .ant-tag-checkable {
  border: 1px solid #ccc;
}
</style>
